<template>
  <Container>
    <div class="container-header group" slot="header">
      <Input
          class="start"
          v-model.trim="list.form.packageName"
          placeholder="礼包名称"
          @on-enter="onSearchBtnClick">
      </Input>
      <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button>
    </div>
    <Tabs v-model="tab">
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="onAddGit">新增礼包</Button>
      <TabPane label="优惠券礼包" name="tab1">
        <homeTable
            :list="list"
            @getData="getData"
            @onPageSizeChange="onPageSizeChange"
            @onPageChange="onPageChange"
          />
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import homeTable from "~/homeTable"
import { clearEmpty } from '@/util'
import GiftListData from "./list/GiftListData"
export default {
  name: 'sales/giftbag/list',
  components: {
    homeTable
  },
  data() {
    return {
      tab: 'tab1',
      list: GiftListData
    }
  },
  mounted() {
    this.list.currentPage =  ~~this.$route.query.currentPage || 1;
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize;
    this.$bus.$on('onEdit', ({id}) => this.onEdit(id))
    this.$bus.$on('onInfo', ({id}) => this.onInfo(id))
    this.$bus.$on('onDelete', ({id, index}) => this.onDelete(id, index))
		this.getData();
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        packageName: this.list.form.packageName
      }
      param = clearEmpty(param)
      this.list.status = "loading"
      this.$jsonPost("/coupon/coupon_package/page", param).then(data => {
        this.list.data = []
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || [])
        this.list.status = "pass"
      }).catch(() => {
        this.list.status = "error"
      })
    },
    onAddGit() {
      this.$router.push({
        name: 'sales/giftbag/add'
      })
    },
    onEdit(id) {
      this.$router.push({
        name: 'sales/giftbag/add',
        query: {
          id
        }
      })
    },
    onInfo(id) {
      this.$router.push({
        name: 'sales/giftbag/info',
        query: {
          id
        }
      })
    },
    onDelete(id, index) {
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除所选礼包？',
        onOk: () => {
          this.$ajaxPost(`/coupon/coupon_package/delete_package/${id}`).then(() => {
            this.$Notice.success({
              title: '删除成功'
            })
            this.list.data.splice(index, 1)
          })
        }
      })
    },
    onPageChange(number) {
			this.list.currentPage = number;
			this.$router.push({
				name: "sales/giftbag/list",
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			});
      this.getData();
		},
    onPageSizeChange(pageSize) {
			this.list.currentPage = 1;
			this.list.pageSize = pageSize;
			this.$router.push({
				name: "sales/giftbag/list",
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			});
			this.getData();
		}
  },
  watch: {
		$route() {
			let page = ~~this.$route.query.currentPage;
			let table = this.list;
			if (table.currentPage !== page) {
				table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage;
				this.getData();
			}
		}
	}
}
</script>